<template>
  <div class="home">
    <div class="login">
      <div class="header">
        <el-tabs type="border-card" stretch v-model="currentTab">
          <el-tab-pane label="User" name="account"
            ><template #label>
              <span class="custom-tabs-label">
                <span class="account-login">账号登陆</span>
              </span>
            </template>
            <LoginAccount ref="loginAccount" />
          </el-tab-pane>
          <el-tab-pane label="Config" name="phone"
            ><template #label>
              <span class="iphone-login">手机登陆</span>
            </template>
            <LoginPhone ref="loginPhone" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tip">
        <el-checkbox v-model="isRemPassword">记住密码</el-checkbox>
        <span>忘记密码</span>
      </div>
      <div class="button">
        <el-button type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import LoginAccount from './cpns/LoginAccount.vue';
import LoginPhone from './cpns/LoginPhone.vue';
import localStroage from '@/common/cache';
let currentTab = ref('account');
let isRemPassword = ref<boolean>(true);
const loginAccount = ref<InstanceType<typeof LoginAccount>>();
const loginPhone = ref<InstanceType<typeof LoginPhone>>();
let login = () => {
  //使用账号和密码来进行登录逻辑
  if (currentTab.value == 'account') {
    loginAccount.value.loginByAccount(isRemPassword.value);
    //使用手机号码登录逻辑
  } else {
    loginPhone.value.loginByPhone();
  }
};
// export default defineComponent({
//   components: {
//     LoginAccount
//   },
//   setup() {
//     return {};
//   }
// });
</script>
<style lang="less" scoped>
.home {
  .login {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
    width: 250px;
    .tip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        color: #409eff;
      }
    }
    .button {
      width: 100%;
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
